import Block from "./Block"
import GridSystem from "../GridSystem"
import { CoordinateSystem, BlockType } from "../Constants";

class MyRect extends Block {

    borderRadius: number;
    pattern: any;

    constructor(x: number, y: number, width: number, height: number) {
        super(x, y, width, height);
        this.class = BlockType.RECT;
        this.borderRadius = 0;   // 180
    }

    loadTexture() {
        let ctx = GridSystem.gls.ctx;
        var img = new Image();
        img.src = '/cd.png';
        img.onload = () => {
            this.pattern = ctx.createPattern(img, 'repeat');
        };
    }

    draw(x: number, y: number, width: number, height: number) {
        let ctx = GridSystem.gls.ctx;
        ctx.save()
        let { x: x1, y: y1 } = this.setAdsorption(x, y, width, height)
        x = x1;
        y = y1;

        this.setAngle(x, y, width, height)
        this.setSizeInfo(x, y, width, height)

        // ------ 公共部分

        ctx.beginPath();
        // ctx.lineCap = "round";
        // let borderRadius =  GridSystem.gls.getRelativeSize(this.borderRadius)
        let borderRadius = this.borderRadius / (CoordinateSystem.MAX_SCALESIZE - GridSystem.gls.scale + CoordinateSystem.SCALE_ABILITY)
        ctx.moveTo(x + borderRadius, y);

        ctx.arcTo(x + width, y, x + width, y + height, borderRadius)
        ctx.arcTo(x + width, y + height, x, y + height, borderRadius)
        ctx.arcTo(x, y + height, x, y, borderRadius)
        ctx.arcTo(x, y, x + width, y, borderRadius)
        // ctx.lineTo(x + width, y);
        // ctx.lineTo(x + width, y + height);
        // ctx.lineTo(x, y + height);
        // ctx.closePath(); //闭合
        ctx.fillStyle = this.isTouch ? this.touchFill : this.fill;	//再填充
        if(this.pattern){
            ctx.fillStyle = this.pattern;
        }
        ctx.fill();	//再填充
        ctx.restore()

        this.setFocusStyle();
        this.setControlPoints(x, y, width, height);
        this.isDraged = false;
        this.drawLink(x, y, width, height);
        this.update(x, y, width, height);
    }

}

export default MyRect;